<template>
  <div>
    <el-form v-model="formSearch" :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="formSearch.content" placeholder="请输入搜索内容"></el-input>
      </el-form-item>
      <el-form-item label="搜索类型">
        <el-select v-model="formSearch.type" placeholder="订单号">
          <el-option label="订单号" value="orderNo"></el-option>
          <el-option label="用户ID" value="userId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-row>
      <el-button type="danger" icon="el-icon-delete" @click="delBatch" plain>批量删除</el-button>
    </el-row>

    <el-table :data="orderList"
              v-loading="loading"
              style="width: 100%; margin-top: 20px"
              border
              @selection-change="handleSelectionChange"
              max-height="600">
      <el-table-column type="selection" align="center" width="55"></el-table-column>
      <el-table-column prop="id"
                       fixed="left"
                       label="ID"
                       sortable
                       width="100">
      </el-table-column>
      <el-table-column prop="orderNo"
                       label="订单号"
                       width="200">
      </el-table-column>
      <el-table-column prop="userId"
                       label="用户ID"
                       width="100">
      </el-table-column>
      <el-table-column prop="orderItemVoList"
                       label="商品列表"
                       width="240">
        <template slot-scope="scope">
          <el-popover
              placement="right"
              title="商品列表"
              trigger="hover"
              width="300">
            <div v-for="(item, index) in scope.row.orderItemVoList" :key="index">
              <img :src="item.productImage" style="max-height: 150px;vertical-align: middle; margin-right: 5px" alt="">
              <span>{{ item.productName }}</span>
            </div>

            <!--            <el-tag slot="reference">{{scope.row.orderItemVoList[0].productName}}</el-tag>-->
            <div style="display: inline-block" slot="reference" v-for="(item, index) in scope.row.orderItemVoList"
                 :key="index">
              <img :src="item.productImage" style="max-height: 50px;max-width: 150px; margin-right: 10px">
            </div>

          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="shippingVo"
                       label="收货信息"
                       width="100">
        <template slot-scope="scope">
          <el-popover
              placement="right"
              title="收货信息"
              trigger="hover">
            <p>收货人： {{ scope.row.shippingVo.receiverName }}</p>
            <p>联系电话：{{ scope.row.shippingVo.receiverMobile }}</p>
            <p>收货地址：{{ scope.row.shippingVo.receiverProvince }} {{ scope.row.shippingVo.receiverCity }}
              {{ scope.row.shippingVo.receiverDistrict }} {{ scope.row.shippingVo.receiverAddress }}</p>
            <el-tag type="info" slot="reference">{{ scope.row.shippingVo.receiverName }}</el-tag>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="payment"
                       label="付款金额"
                       width="200">
      </el-table-column>
      <el-table-column prop="paymentType"
                       label="支付类型"
                       width="105">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.paymentType === 1">在线支付</el-tag>
          <el-tag v-if="scope.row.paymentType === 2" type="success">微信支付</el-tag>
          <el-tag v-if="scope.row.paymentType === 3" class="alipay">支付宝支付</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="postage"
                       label="运费"
                       width="100">
      </el-table-column>
      <el-table-column prop="status"
                       label="订单状态"
                       width="130">
        <template slot-scope="scope">

          <el-dropdown  @command="updateStatus">
            <el-button style="border: none;outline: none;box-shadow:none;background: none">
              <el-tag v-if="scope.row.status === 0" type="danger">取消订单</el-tag>
              <el-tag v-if="scope.row.status === 10" type="info">未付款</el-tag>
              <el-tag v-if="scope.row.status === 20" type="success">已付款</el-tag>
              <el-tag v-if="scope.row.status === 40" type="success">已发货</el-tag>
              <el-tag v-if="scope.row.status === 50" type="success">交易成功</el-tag>
              <el-tag v-if="scope.row.status === 60" type="danger">交易关闭</el-tag>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="handleUpdateStatus(scope.row.id, 0)">取消订单</el-dropdown-item>
              <el-dropdown-item :command="handleUpdateStatus(scope.row.id, 10)">未付款</el-dropdown-item>
              <el-dropdown-item :command="handleUpdateStatus(scope.row.id, 20)">已付款</el-dropdown-item>
              <el-dropdown-item :command="handleUpdateStatus(scope.row.id, 40)">已发货</el-dropdown-item>
              <el-dropdown-item :command="handleUpdateStatus(scope.row.id, 50)">交易成功</el-dropdown-item>
              <el-dropdown-item :command="handleUpdateStatus(scope.row.id, 60)">交易关闭</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>


        </template>
      </el-table-column>
      <el-table-column prop="paymentTime"
                       label="支付时间"
                       width="180">
      </el-table-column>
      <el-table-column prop="sendTime"
                       label="发货时间"
                       width="180">
      </el-table-column>
      <el-table-column prop="endTime"
                       label="交易完成时间"
                       width="180">
      </el-table-column>
      <el-table-column prop="closeTime"
                       label="交易关闭时间"
                       width="180">
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="70">
        <template slot-scope="scope">
<!--          <el-button type="primary" icon="el-icon-edit" @click="showEditProduct(scope.row)" circle></el-button>-->
          <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)" circle></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="margin-top: 20px"
        background
        :page-sizes="[5, 10, 15, 20]"
        layout="sizes, prev, pager, next"
        :total="total"
        :current-page="currentPage"
        :page-size="pageSize"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'admin-order',

  data() {
    return {
      orderList: [],
      multipleSelection: {},
      total: 0,
      pageSize: 5,
      currentPage: 0,
      formSearch: {}, //搜索表单
      loading: true,
    }
  },

  mounted() {
    this.getOrderList()
  },

  methods: {
    getOrderList() {
      this.loading = true
      this.request.get('/order/list', {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          content: this.formSearch.content,
          type: this.formSearch.type
        }
      }).then((res) => {
        this.orderList = res.list
        this.total = Number(res.total)
        this.loading = false
      }).catch(e => {
        this.$message.error(e)
      })
    },
    onSubmit() {
      this.getOrderList();
    },
    //修改订单状态
    handleUpdateStatus(id, status) {
      return {
        id, status
      }
    },
    //修改订单状态
    updateStatus(command) {
      let {id, status} = command
      this.request.put('/order/status/' + id + '/' + status).then(() => {
        this.$message.success('更新成功')
        this.getOrderList()
      }).catch(e => {
        this.$message.error(e)
      })
    },

    //删除订单
    handleDelete(row) {
      this.$confirm("是否删除该订单", "提示", {
        type: 'error'
      }).then(() => {
        this.request.delete('/order/' + row.id).then(() => {
          this.$message.success("删除成功")
          this.getOrderList()
        }).catch(e => {
          this.$message.error(e)
        })
      }).catch(() => {
        this.$message.info('取消删除')
      })
    },
    //批量删除
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delBatch() {
      this.$confirm("是否确认批量删除", "提示", {
        type: 'error'
      }).then(() => {
        let ids = this.multipleSelection.map(v => v.id);
        if (ids.length > 0) {
          this.request.delete('/order/' + ids).then(() => {
            this.$message.success('批量删除成功')
            location.reload()
          }).catch(e => {
            this.$message.error(e)
            location.reload()
          })
        } else {
          this.$message.info('当前未选中订单')
        }

      }).catch(() => {
        this.$message.info('取消删除')
      })
    },

    //分页功能
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getOrderList()
    },
    //翻页功能
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getOrderList()
    },
  }
}
</script>

<style lang="scss" scoped>
.alipay {
  background-color: #ecf5ff;
  display: inline-block;
  height: 32px;
  padding: 0 10px;
  line-height: 30px;
  font-size: 12px;
  color: #409eff;
  border: 1px solid #d9ecff;
  border-radius: 4px;
  box-sizing: border-box;
  white-space: nowrap;
}
</style>
